<template>
  <div class="bind-phone">
    <p class="title">{{title}}</p>
    <p class="tip">请先登录账号</p>
    <div class="div-input">
      <img src="@/assets/bangdingshouji01.png" class="phone-img" alt="">
      <input type="text" v-model="mobile" placeholder="请输入手机号码">
    </div>
    <div class="div-input">
      <img src="@/assets/bangdingshouji02.png" class="code-img" alt="">
      <input type="text" v-model="password" placeholder="请输入密码" >
    </div>
    <span class="btn" @click="submit">提交</span>
    <span class="i-tip" @click="router({path: './forgetPwd'})">忘记密码？</span>
  </div>
</template>

<script>

import {login} from '@/api/api'
import { AlertModule } from "vux"
  export default {
    components: {
    },
    data () {
      return {
        mobile:'',
        password:'',
        title: '',
        num: '',
      }
    },
    created () {
      if(this.$route.name == "teacher-login"){
        this.title = '讲师人员登录';
        this.num = 2;
      }else{
        this.title = '管理人员登录';
        this.num = 1;
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      submit () {
        if(!this.mobile || !this.password){
          AlertModule.show({
            title: '温馨提示',
            content: '请填写内容'
          })
          return;
        }
        var data = {type:this.num,account:this.mobile,pwd:this.password};
        login(data).then((res)=>{
          if(res.data.status==1){            
            if(this.num == '1'){
              this.router({path: './home'})
            }else{
              this.router({path: './person'})
            }                
          }else{
            AlertModule.show({
              title: '温馨提示',
              content: res.data.info,
            })
          }
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
.bind-phone
  height 100vh
  background-color #fff
  .title
    color #333
    font-size 2.6rem
    line-height 2.6rem
    height 2.6rem
    font-weight bold
    text-align center
    padding-top 3.2rem
  .tip
    color #999
    font-size 1.5rem
    line-height 1.6rem;
    height 1.6rem;
    margin-top 1.5rem
    text-align center
    padding-bottom 1rem
  .div-input
    width 82%
    margin-left 9%
    height 5rem
    line-height 5rem
    color #333
    font-size 1.5rem
    position relative
    border-radius 100px
    margin-top 2rem
    .phone-img
      width 1.4rem
      position absolute
      left 2rem
      top 1.5rem
      z-index 1
    .code-img
      position absolute
      width 1.4rem
      top 1.7rem
      z-index 1
      left 2rem
    input
      width 100%
      height 100%
      background-color #f5f5f5
      border-radius 100px
      position absolute
      padding-left 4.7rem
      box-sizing border-box
      left 0
      top 0
      font-size 1.5rem
      outline none
  .btn
    width 82%;
    margin-left 9%
    height 5.3rem
    line-height 5.3rem
    margin-top 3rem
    text-align center
    color #fff
    background-color #172F6D
    border-radius 100px
    font-size 1.7rem
    font-weight bold
    display block
  .i-tip
    font-size 1.3rem
    color #666
    margin-top 2rem
    text-align center
    display block
</style>
